<template>
  <div>
    <div>
      <div class="add"><el-link type="primary" @click="handleAdd">添加</el-link></div>
      <div v-if="!hasData" class="tips">{{tips}}</div>
      <div class="sw" v-if="hasData">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="data1"
            :label="label[type].label1"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data2"
            :label="label[type].label2"
            width="80">
          </el-table-column>
          <el-table-column
            prop="data3"
            :label="label[type].label3"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data4"
            :label="label[type].label4"
            width="80">
          </el-table-column>
          <el-table-column
            prop="data5"
            :label="label[type].label5"
            width="70">
          </el-table-column>
          <el-table-column
            prop="data6"
            :label="label[type].label6"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" v-show="pages!== 10">
          <el-pagination
            layout="prev, pager, next"
            :total="pages"
            :current-page.sync="currentPage"
            @current-change="changePage">
          </el-pagination>
        </div>
        <el-dialog title="添加职员" :visible.sync="employeeVisible" :close-on-click-modal=false :width="dialogWidth">
          <el-form :model="eForm"  :style="{width: formWidth}" :rules="eRules" ref="eForm">
            <el-form-item label="编号" :label-width="formLabelWidth" prop="defaultNo">
              <el-input v-model="eForm.defaultNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth" prop="employeeTel">
              <el-input v-model="eForm.employeeTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth" prop="defaultPart">
              <el-select v-model="eForm.defaultPart" placeholder="请选择部门">
                <el-option label="市场部" value="1"></el-option>
                <el-option label="策划部" value="2"></el-option>
                <el-option label="财务部" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="employeeName">
              <el-input v-model="eForm.employeeName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="employeeSex">
              <el-select v-model="eForm.employeeSex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="employeeVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEmployee">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="添加会员" :visible.sync="memberVisible" :close-on-click-modal=false :width="dialogWidth">
          <el-form :model="mForm"  :style="{width: formWidth}" :rules="mRules" ref="mForm">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="memberTel">
              <el-input v-model="mForm.memberTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="memberName">
              <el-input v-model="mForm.memberName" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="memberVisible = false">取 消</el-button>
            <el-button type="primary" @click="addMember">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="添加老师" :visible.sync="teacherVisible" :close-on-click-modal=false :width="dialogWidth">
          <el-form :model="tForm"  :style="{width: formWidth}" :rules="tRules" ref="tForm">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="teacherTel">
              <el-input v-model="tForm.teacherTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="teacherName">
              <el-input v-model="tForm.teacherName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="teacherSex">
              <el-select v-model="tForm.teacherSex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="teacherVisible = false">取 消</el-button>
            <el-button type="primary" @click="addTeacher">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改职员" :visible.sync="employeeEdit" :close-on-click-modal=false :width="dialogWidth">
          <el-form :model="employeeForm"  :style="{width: formWidth}" :rules="eRule" ref="employeeForm">
            <el-form-item label="编号" :label-width="formLabelWidth" prop="defaultNo">
              <el-input v-model="employeeForm.defaultNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth" prop="employeeTel">
              <el-input v-model="employeeForm.employeeTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth" prop="defaultPart">
              <el-select v-model="employeeForm.defaultPart" placeholder="请选择部门">
                <el-option label="市场部" value="1"></el-option>
                <el-option label="策划部" value="2"></el-option>
                <el-option label="财务部" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="employeeName">
              <el-input v-model="employeeForm.employeeName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="employeeSex">
              <el-select v-model="employeeForm.employeeSex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="employeePass">
              <el-input v-model="employeeForm.employeePass" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="employeeEdit = false">取 消</el-button>
            <el-button @click="resetForm('employeeForm')">重置</el-button>
            <el-button type="primary" @click="editEmployee">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改老师" :visible.sync="teacherEdit" :close-on-click-modal=false :width="dialogWidth">
          <el-form :model="teacherForm"  :style="{width: formWidth}" :rules="tRule" ref="teacherForm">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="teacherTel">
              <el-input v-model="teacherForm.teacherTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="teacherName">
              <el-input v-model="teacherForm.teacherName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="teacherSex">
              <el-select v-model="teacherForm.teacherSex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="积分" :label-width="formLabelWidth" prop="teacherPoints">
              <el-input v-model="teacherForm.teacherPoints" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="介绍" :label-width="formLabelWidth" prop="teacherIntroduce">
              <el-input type="textarea" v-model="teacherForm.teacherIntroduce" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="teacherPass">
              <el-input v-model="teacherForm.teacherPass" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="teacherEdit = false">取 消</el-button>
            <el-button @click="resetForm('teacherForm')">重置</el-button>
            <el-button type="primary" @click="editTeacher">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改会员" :visible.sync="memberEdit" :close-on-click-modal=false :width="dialogWidth">
          <el-form :model="memberForm"  :style="{width: formWidth}" :rules="mRule" ref="memberForm">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="memberTel">
              <el-input v-model="memberForm.memberTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="memberName">
              <el-input v-model="memberForm.memberName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="积分" :label-width="formLabelWidth" prop="memberPoint">
              <el-input v-model="memberForm.memberPoint" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="金币" :label-width="formLabelWidth" prop="memberCoin">
              <el-input v-model="memberForm.memberCoin" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="等级" :label-width="formLabelWidth" prop="memberRank">
              <el-input v-model="memberForm.memberRank" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="memberPass">
              <el-input v-model="memberForm.memberPass" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="memberEdit = false">取 消</el-button>
            <el-button @click="resetForm('memberForm')">重置</el-button>
            <el-button type="primary" @click="editMember">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'pcMember',
  data () {
    let checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            let port
            if (this.type === 0) {
              port = this.ports.personalCenter.administrator.employee + '/add/telephone'
            } else if (this.type === 1) {
              port = this.ports.personalCenter.administrator.member + '/add/telephone'
            } else if (this.type === 2) {
              port = this.ports.personalCenter.administrator.teacher + '/add/telephone'
            }
            this.http.post(port, {
              tel: value
            }, res => {
              if (res.status === 200) {
                let data = res.data.result
                if (data.code === 200) {
                  callback()
                } else if (data.code === 1 || data.code === -1) {
                  callback(new Error(data.msg))
                }
              } else {
                console.log(res)
              }
            })
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    let checkNo = (rule, value, callback) => {
      const noReg = /^[0-9]{6}$/
      if (!value) {
        return callback(new Error('员工编号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (noReg.test(value)) {
            let port
            if (this.type === 0) {
              port = this.ports.personalCenter.administrator.employee + '/add/number'
            } else if (this.type === 1) {
              port = this.ports.personalCenter.administrator.member + '/add/number'
            } else if (this.type === 2) {
              port = this.ports.personalCenter.administrator.teacher + '/add/number'
            }
            this.http.post(port, {
              defaultNo: value
            }, res => {
              if (res.status === 200) {
                let data = res.data.result
                if (data.code === 200) {
                  callback()
                } else if (data.code === 1 || data.code === -1) {
                  callback(new Error(data.msg))
                }
              } else {
                console.log(res)
              }
            })
          } else {
            callback(new Error('员工编号格式不正确'))
          }
        }
      }, 100)
    }
    let checkAll = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空'))
      }
      setTimeout(() => {
        callback()
      }, 100)
    }
    let editPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    let editNo = (rule, value, callback) => {
      const noReg = /^[0-9]{6}$/
      if (!value) {
        return callback(new Error('员工编号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (noReg.test(value)) {
            callback()
          } else {
            callback(new Error('员工编号格式不正确'))
          }
        }
      }, 100)
    }
    let editNumber = (rule, value, callback) => {
      if (!value && value !== 0) {
        return callback(new Error('不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 100)
    }
    return {
      label: [{
        label1: '账号',
        label2: '姓名',
        label3: '电话',
        label4: '编号',
        label5: '性别',
        label6: '部门'
      }, {
        label1: '账号',
        label2: '呢称',
        label3: '电话',
        label4: '积分',
        label5: '金币',
        label6: '等级'
      }, {
        label1: '账号',
        label2: '姓名',
        label3: '电话',
        label4: '积分',
        label5: '性别',
        label6: '简介'
      }],
      type: 0,
      tips: '',
      tableData: '',
      pages: 10,
      currentPage: 1,
      hasData: false,
      employeeVisible: false,
      memberVisible: false,
      teacherVisible: false,
      employeeEdit: false,
      teacherEdit: false,
      memberEdit: false,
      formLabelWidth: '1.3rem',
      dialogWidth: '6.5rem',
      formWidth: '5rem',
      eForm: {
        employeeTel: '',
        defaultPart: '',
        employeeName: '',
        defaultNo: '',
        employeeSex: ''
      },
      tForm: {
        teacherTel: '',
        teacherName: '',
        teacherSex: ''
      },
      mForm: {
        memberName: '',
        memberTel: ''
      },
      employeeForm: {
        employeeNo: '',
        employeeName: '',
        employeeTel: '',
        defaultNo: '',
        employeeSex: '',
        defaultPart: '',
        employeePass: ''
      },
      memberForm: {
        memberNo: '',
        memberName: '',
        memberTel: '',
        memberPoint: '',
        memberCoin: '',
        memberRank: '',
        memberPass: ''
      },
      teacherForm: {
        teacherNo: '',
        teacherName: '',
        teacherTel: '',
        teacherPoints: '',
        teacherSex: '',
        teacherIntroduce: '',
        teacherPass: ''
      },
      eRules: {
        defaultNo: [
          { validator: checkNo, trigger: 'blur' }
        ],
        defaultPart: [
          { validator: checkAll, trigger: 'blur' }
        ],
        employeeName: [
          { validator: checkAll, trigger: 'blur' }
        ],
        employeeSex: [
          { validator: checkAll, trigger: 'blur' }
        ],
        employeeTel: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      },
      tRules: {
        teacherName: [
          { validator: checkAll, trigger: 'blur' }
        ],
        teacherSex: [
          { validator: checkAll, trigger: 'blur' }
        ],
        teacherTel: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      },
      mRules: {
        memberName: [
          { validator: checkAll, trigger: 'blur' }
        ],
        memberTel: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      },
      eRule: {
        defaultNo: [
          { validator: editNo, trigger: 'blur' }
        ],
        defaultPart: [
          { validator: checkAll, trigger: 'blur' }
        ],
        employeeName: [
          { validator: checkAll, trigger: 'blur' }
        ],
        employeeSex: [
          { validator: checkAll, trigger: 'blur' }
        ],
        employeeTel: [
          { validator: editPhone, trigger: 'blur' }
        ],
        employeePass: [
          { validator: checkAll, trigger: 'blur' }
        ]
      },
      tRule: {
        teacherName: [
          { validator: checkAll, trigger: 'blur' }
        ],
        teacherTel: [
          { validator: editPhone, trigger: 'blur' }
        ],
        teacherPoint: [
          { validator: editNumber, trigger: 'blur' }
        ],
        teacherSex: [
          { validator: checkAll, trigger: 'blur' }
        ],
        teacherIntroduce: [
          { validator: checkAll, trigger: 'blur' }
        ],
        teacherPass: [
          { validator: checkAll, trigger: 'blur' }
        ]
      },
      mRule: {
        memberName: [
          { validator: checkAll, trigger: 'blur' }
        ],
        memberTel: [
          { validator: editPhone, trigger: 'blur' }
        ],
        memberPoint: [
          { validator: editNumber, trigger: 'blur' }
        ],
        memberCoin: [
          { validator: editNumber, trigger: 'blur' }
        ],
        memberRank: [
          { validator: editNumber, trigger: 'blur' }
        ],
        memberPass: [
          { validator: checkAll, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    part (part, reverse) {
      let result = ''
      if (reverse) {
        switch (part) {
          case '市场部' :
            result = '1'
            break
          case '策划部' :
            result = '2'
            break
          case '财务部' :
            result = '3'
            break
          default :
            break
        }
      } else {
        switch (part) {
          case '1' :
            result = '市场部'
            break
          case '2' :
            result = '策划部'
            break
          case '3' :
            result = '财务部'
            break
          default :
            break
        }
      }
      return result
    },
    sex (sex, reverse) {
      let result = ''
      if (reverse) {
        switch (sex) {
          case '女' :
            result = '0'
            break
          case '男' :
            result = '1'
            break
          default :
            break
        }
      } else {
        switch (sex) {
          case '0' :
            result = '女'
            break
          case '1' :
            result = '男'
            break
          default :
            break
        }
      }
      return result
    },
    getData (page) {
      if (this.type === 0) {
        this.http.get(this.ports.personalCenter.administrator.employee + '?page=' + page,
          res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.hasData = true
                let length = data.msg.length
                let result = []
                for (let i = 0; i < length; i++) {
                  result.push(
                    Object.assign({}, {data1: data.msg[i].employeeNo},
                      {data2: data.msg[i].employeeName},
                      {data3: data.msg[i].employeeTel},
                      {data4: data.msg[i].defaultNo},
                      {data5: this.sex(data.msg[i].employeeSex, false)},
                      {data6: this.part(data.msg[i].defaultPart, false)},
                      {data7: data.msg[i].employeePass})
                  )
                }
                this.tableData = result
                this.pages = data.pages * 10
                if (data.msg.length === 0) {
                  this.getData(data.pages)
                }
              } else if (data.code === 1 || data.code === -1) {
                this.hasData = false
                this.tips = data.msg
              }
            } else if (res.status === 401) {
              this.$router.push('/')
            } else {
              console.log(res)
            }
          })
      } else if (this.type === 1) {
        this.http.get(this.ports.personalCenter.administrator.member + '?page=' + page,
          res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.hasData = true
                let length = data.msg.length
                let result = []
                for (let i = 0; i < length; i++) {
                  result.push(
                    Object.assign({}, {data1: data.msg[i].memberNo},
                      {data2: data.msg[i].memberName},
                      {data3: data.msg[i].memberTel},
                      {data4: data.msg[i].memberPoint},
                      {data5: data.msg[i].memberCoin},
                      {data6: data.msg[i].memberRank},
                      {data7: data.msg[i].memberPass})
                  )
                }
                this.tableData = result
                this.pages = data.pages * 10
                if (data.msg.length === 0) {
                  this.getData(data.pages)
                }
              } else if (data.code === 1 || data.code === -1) {
                this.hasData = false
                this.tips = data.msg
              }
            } else if (res.status === 401) {
              this.$router.push('/')
            } else {
              console.log(res)
            }
          })
      } else if (this.type === 2) {
        this.http.get(this.ports.personalCenter.administrator.teacher + '?page=' + page,
          res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.hasData = true
                let length = data.msg.length
                let result = []
                for (let i = 0; i < length; i++) {
                  result.push(
                    Object.assign({}, {data1: data.msg[i].teacherNo},
                      {data2: data.msg[i].teacherName},
                      {data3: data.msg[i].teacherTel},
                      {data4: data.msg[i].teacherPoints},
                      {data5: this.sex(data.msg[i].teacherSex)},
                      {data6: data.msg[i].teacherIntroduce},
                      {data7: data.msg[i].teacherPass})
                  )
                }
                this.tableData = result
                this.pages = data.pages * 10
                if (data.msg.length === 0) {
                  this.getData(data.pages)
                }
              } else if (data.code === 1 || data.code === -1) {
                this.hasData = false
                this.tips = data.msg
              }
            } else if (res.status === 401) {
              this.$router.push('/')
            } else {
              console.log(res)
            }
          })
      }
    },
    changePage () {
      this.getData(this.currentPage)
    },
    handleDelete (row) {
      let port
      if (this.type === 0) {
        port = this.ports.personalCenter.administrator.employee + '/' + row.data1
      } else if (this.type === 1) {
        port = this.ports.personalCenter.administrator.member + '/' + row.data1
      } else if (this.type === 2) {
        port = this.ports.personalCenter.administrator.teacher + '/' + row.data1
      }
      this.http.delete(port,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            if (data.code === 200) {
              this.$message({
                message: data.msg,
                type: 'success'
              })
              this.getData(this.currentPage)
            } else if (data.code === 1 || data.code === -1) {
              this.$message.error('删除失败')
            }
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    },
    handleAdd () {
      if (this.type === 0) {
        this.employeeVisible = true
      } else if (this.type === 1) {
        this.memberVisible = true
      } else if (this.type === 2) {
        this.teacherVisible = true
      }
    },
    addEmployee () {
      this.$refs['eForm'].validate((valid) => {
        if (valid) {
          this.http.post(this.ports.personalCenter.administrator.employee + '/add/submit', {
            defaultNo: this.eForm.defaultNo,
            defaultPart: this.eForm.defaultPart,
            employeeName: this.eForm.employeeName,
            employeeSex: this.eForm.employeeSex,
            tel: this.eForm.employeeTel
          }, res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'success'
                })
                this.employeeVisible = false
                this.getData(this.currentPage)
              } else if (data.code === 1 || data.code === -1) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'error'
                })
              }
            } else {
              console.log(res)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addTeacher () {
      this.$refs['tForm'].validate((valid) => {
        if (valid) {
          this.http.post(this.ports.personalCenter.administrator.teacher + '/add/submit', {
            teacherName: this.tForm.teacherName,
            tel: this.tForm.teacherTel,
            teacherSex: this.tForm.teacherSex
          }, res => {
            console.log(res)
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'success'
                })
                this.teacherVisible = false
                this.getData(this.currentPage)
              } else if (data.code === 1 || data.code === -1) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'error'
                })
              }
            } else {
              console.log(res)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addMember () {
      this.$refs['mForm'].validate((valid) => {
        if (valid) {
          this.http.post(this.ports.personalCenter.administrator.member + '/add/submit', {
            memberName: this.mForm.memberName,
            tel: this.mForm.memberTel
          }, res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'success'
                })
                this.memberVisible = false
                this.getData(this.currentPage)
              } else if (data.code === 1 || data.code === -1) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'error'
                })
              }
            } else {
              console.log(res)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick (row) {
      if (this.type === 0) {
        this.employeeEdit = true
        let str = JSON.stringify(this.employeeForm)
        let form = JSON.parse(str)
        let index = 1
        for (let key in form) {
          form[key] = row['data' + index]
          index++
        }
        form['employeeSex'] = this.sex(form['employeeSex'], true)
        form['defaultPart'] = this.part(form['defaultPart'], true)
        this.employeeForm = form
      } else if (this.type === 1) {
        this.memberEdit = true
        let str = JSON.stringify(this.memberForm)
        let form = JSON.parse(str)
        let index = 1
        for (let key in form) {
          form[key] = row['data' + index]
          index++
        }
        this.memberForm = form
      } else if (this.type === 2) {
        this.teacherEdit = true
        let index = 1
        let str = JSON.stringify(this.teacherForm)
        let form = JSON.parse(str)
        for (let key in form) {
          form[key] = row['data' + index]
          index++
        }
        form['teacherSex'] = this.sex(form['teacherSex'], true)
        this.teacherForm = form
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    editEmployee () {
      this.$refs['employeeForm'].validate((valid) => {
        if (valid) {
          this.http.post(this.ports.personalCenter.administrator.employee + '/' + this.employeeForm.employeeNo, {
            employeeName: this.employeeForm.employeeName,
            employeeTel: this.employeeForm.employeeTel,
            defaultNo: this.employeeForm.defaultNo,
            employeeSex: this.employeeForm.employeeSex,
            defaultPart: this.employeeForm.defaultPart,
            employeePass: this.employeeForm.employeePass
          }, res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'success'
                })
                this.employeeEdit = false
                this.getData(this.currentPage)
              } else if (data.code === 1 || data.code === -1) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'error'
                })
              }
            } else {
              console.log(res)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    editTeacher () {
      this.$refs['teacherForm'].validate((valid) => {
        if (valid) {
          this.http.post(this.ports.personalCenter.administrator.teacher + '/' + this.teacherForm.teacherNo, {
            teacherName: this.teacherForm.teacherName,
            teacherTel: this.teacherForm.teacherTel,
            teacherPoints: this.teacherForm.teacherPoints,
            teacherSex: this.teacherForm.teacherSex,
            teacherIntroduce: this.teacherForm.teacherIntroduce,
            teacherPass: this.teacherForm.teacherPass
          }, res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'success'
                })
                this.teacherEdit = false
                this.getData(this.currentPage)
              } else if (data.code === 1 || data.code === -1) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'error'
                })
              }
            } else {
              console.log(res)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    editMember () {
      this.$refs['memberForm'].validate((valid) => {
        if (valid) {
          this.http.post(this.ports.personalCenter.administrator.member + '/' + this.memberForm.memberNo, {
            memberName: this.memberForm.memberName,
            memberTel: this.memberForm.memberTel,
            memberPoint: this.memberForm.memberPoint,
            memberCoin: this.memberForm.memberCoin,
            memberRank: this.memberForm.memberRank,
            memberPass: this.memberForm.memberPass
          }, res => {
            if (res.status === 200) {
              let data = res.data.result
              if (data.code === 200) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'success'
                })
                this.memberEdit = false
                this.getData(this.currentPage)
              } else if (data.code === 1 || data.code === -1) {
                this.$message({
                  showClose: true,
                  message: data.msg,
                  type: 'error'
                })
              }
            } else {
              console.log(res)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  watch: {
    $route (to) {
      let str = to.path.slice(16)
      if (str === 'pcEmployee') {
        this.type = 0
        this.getData(1)
      } else if (str === 'pcMember') {
        this.type = 1
        this.getData(1)
      } else if (str === 'pcTeacher') {
        this.type = 2
        this.getData(1)
      }
    },
    employeeVisible: function (val) {
      if (val) {
        this.$refs['eForm'].resetFields()
      }
    },
    teacherVisible: function (val) {
      if (val) {
        this.$refs['tForm'].resetFields()
      }
    },
    memberVisible: function (val) {
      if (val) {
        this.$refs['mForm'].resetFields()
      }
    },
    employeeEdit: function (val) {
      if (val) {
        this.$refs['employeeForm'].resetFields()
      }
    },
    teacherEdit: function (val) {
      if (val) {
        this.$refs['teacherForm'].resetFields()
      }
    },
    memberEdit: function (val) {
      if (val) {
        this.$refs['memberForm'].resetFields()
      }
    }
  },
  mounted: function () {
    this.getData(1)
  }
}
</script>

<style lang="scss" scoped>
  .block{
    padding: 0;
    margin: 50px 0 100px 0;
    text-align: center;
  }
  .tips {
    margin-top: 100px;
    color: #5e5e5e;
  }
  .add {
    text-align: right;
    margin-bottom: 0.5rem;
    padding-right: 0.5rem;
    margin-top: 0.2rem;
  }
  .sw {
    margin-bottom: 100px;
  }
</style>
